<template>
  <div class="a">
    <p>灾害管理</p>
    <div class="top">
      <div class="chlx">
        <span>灾害类型</span>
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="ssx">
        <span>所属乡</span>
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <el-button type="small">查询</el-button>
    </div>
    <div class="txt"></div>
    <div class="ipts">
      <div class="ipts_one">
        <div><span>唯一编号</span><el-input type="text" /></div>
        <div><span>灾害点名称</span><el-input type="text" /></div>
      </div>
      <div class="ipts_two">
        <div><span>X坐标</span><el-input type="text" /></div>
        <div><span>经度</span><el-input type="text" /></div>
      </div>
      <div class="ipts_three">
        <div><span>Y坐标</span><el-input type="text" /></div>
        <div><span>纬度</span><el-input type="text" /></div>
      </div>
    </div>
    <el-button type="small" style="margin: 10px">地图点选</el-button>
    <div class="ipts1">
      <div class="one">
        <div>
          <span>所属乡</span>
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div><span>死亡人数</span><el-input type="text" /></div>
      </div>
      <div class="two">
        <div><span>行政区县</span><el-input type="text" /></div>
        <div><span>威胁人口</span><el-input type="text" /></div>
      </div>
      <div class="three">
        <div>
          <span>灾害类型</span
          ><el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div><span>直接损失</span><el-input type="text" /></div>
      </div>
      <div class="four">
        <div>
          <span>灾害规模</span
          ><el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div><span>威胁财产</span><el-input type="text" /></div>
      </div>
      <div class="five">
        <div>
          <span>灾害等级</span
          ><el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div><span>目前状态</span><el-input type="text" /></div>
      </div>
      <div class="six">
        <div>
          <span>险情等级</span
          ><el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div><span>方向</span><el-input type="text" /></div>
      </div>
      <div class="senven">
        <div><span>灾害体积</span><el-input type="text" /></div>
        <div>
          <span>易发等级</span
          ><el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="eight">
        <div><span>关注等级</span><el-input type="text" /></div>
      </div>
      <div class="nine">
        <div>
          <span>发生时间</span
          ><el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div>
          <span>野外编号</span>
          <el-input type="text" />
        </div>
      </div>
      <div class="ten">
        <div>
          <span>监测人</span>
          <el-input type="text" />
        </div>
        <div>
          <span>监测人电话</span>
          <el-input type="text" />
        </div>
      </div>
      <div class="eleven">
        <div>
          <span>监测负责人</span>
          <el-input type="text" />
        </div>
        <div>
          <span>监测负责人电话</span>
          <el-input type="text" />
        </div>
      </div>
      <div class="twelve">
        <div>
          <span>地理位置</span>
          <el-input type="text" />
        </div>
      </div>
    </div>
    <div class="checkbox">
      <el-checkbox-group
        v-model="checkedCities"
        @change="handleCheckedCitiesChange"
      >
        <el-checkbox v-for="city in cities" :label="city" :key="city">{{
          city
        }}</el-checkbox>
      </el-checkbox-group>
    </div>
    <div class="btn">
      <el-button type="small">新建</el-button>
      <el-button type="small">添加</el-button>
      <el-button type="small">修改</el-button>
      <el-button type="small">删除</el-button>
    </div>
    <div class="btn">
      <el-button type="small">导出Excel</el-button>
      <el-button type="small">批量导入</el-button>
      <el-button type="small">更新灾点图层</el-button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      cities: ["遥感", "调查", "测绘", "勘察"],
      checkedCities: [],
    };
  },
  methods: {
    handleCheckedCitiesChange() {},
  },
};
</script>
<style scoped lang="less">
.a {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 10px;
  justify-content: center;
  P {
    margin-bottom: 10px;
  }
  .top {
    display: flex;
    width: 100%;
    font-size: 10px;
    justify-content: space-between;

    .chlx,
    .ssx {
      display: flex;
      width: 100%;
      align-items: center;
      .el-select {
        width: 100px;
      }
    }
  }
  .txt {
    width: 90%;
    height: 200px;
    background-color: #ababab;
    margin-top: 10px;
  }
  .ipts_one,
  .ipts_two,
  .ipts_three {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin: 5px;
    div {
      display: flex;
      align-items: center;
      span {
        width: 60px;
        margin-right: 10px;
      }
      .el-input {
        width: 100px;
      }
    }
  }
  .ipts1 {
    .el-input,
    .el-select {
      width: 100px;
    }
    .one,
    .two,
    .three,
    .four,
    .five,
    .six,
    .senven,
    .eight,
    .nine,
    .ten,
    .eleven,
    .twelve {
      margin: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      span {
        width: 60px;
        margin-right: 10px;
      }
      div {
        display: flex;
        align-items: center;
      }
    }
  }
  .checkbox {
    margin-bottom: 10px;
  }
  .btn {
    margin: 10px;
  }
}
</style>
